<template>
  <transition name="slide">
    <music-list :title="title" :bgImg="bgImg" :songs="songs"></music-list>
  </transition>
</template>

<script>
  import {mapGetters} from 'vuex';
  import {getSingerDetail} from 'api/singer.js';
  import {ERR_OK} from 'api/config.js';
  import {createSong} from 'common/js/song.js';
  import MusicList from '../music-list/music-list.vue';

  export default {
    components: {MusicList},
    data () {
      return {
        songs: []
      };
    },
    computed: {
      title () {
        return this.singer.name;
      },
      bgImg () {
        return this.singer.avatar;
      },
      ...mapGetters([
        'singer'
      ])
    },
    methods: {
      _getSingerDetailData () {
        if (!this.singer.id) {
          this.$router.push('/singer');
          return;
        }
        getSingerDetail(this.singer.id).then(res => {
          if (res.code === ERR_OK) {
            this.songs = this._normalizeSongs(res.data.list);
           // console.log(this.songs);
          }
        }).catch(() => {
          console.log(`获取歌手详情数据失败`);
        });
      },
      _normalizeSongs (list) {
        let ret = [];
        list.forEach(item => {
          let {musicData} = item;
          if (musicData.songid && musicData.albummid) {
            ret.push(createSong(musicData));
          }
        });
        return ret;
      }
    },
    created () {
    //  console.log(this.singer);
      this._getSingerDetailData();
    }
  };
</script>

<style lang="less" scoped="">
  @import "~common/css/variable.less";

  .slide-enter-active, .slide-leave-active {
    transition: 0.3s all;
  }

  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }

</style>
